// todo ======================= 获取学员数据 =======================
tbodyAxios()
function tbodyAxios(){
    axios.get(`/student/list`).then(({data:{data,code,message}})=>{
        // console.log(data);
        newHtml=``
        data.forEach(item => {
            newHtml+=`
                    <tr>
                    <th scope="row">${item.id}</th>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.group}</td>
                    <td>${item.phone}</td>
                    <td>${item.salary}</td>
                    <td>${item.truesalary}</td>
                    <td>${item.province}${item.city}${item.county}</td>
                    <td>
                    <button type="button" class="btn btn-primary btn-sm btn-xg" data-id="${item.id}">修改</button>
                    <button type="button" class="btn btn-danger btn-sm  btn-SC" data-id="${item.id}">删除</button>
                    </td>
                    </tr> 
                    `
        });
        qs(`tbody`).innerHTML=newHtml
        
    })
}
// todo ======================= 添加显示弹层 =======================
qs(`#addBtn`).addEventListener(`click`,function(){
    qs(`#addModal`).classList.add(`show`)
    qs(`#backdrop`).classList.add(`show`)
})
qs(`#closeAddBtn`).addEventListener(`click`,function(){
    qs(`#addModal`).classList.remove(`show`)
    qs(`#backdrop`).classList.remove(`show`)
})
// todo ======================= 获取省 =======================
axios.get(`/geo/province`).then(({data:res})=>{

    qsAll(`[name=province]`).forEach(item=>{
    let  htmlStr=`<option selected value="">--省--</option>`
            res.forEach(item1=>{
            htmlStr+=` <option  value="${item1}">${item1}</option>`
            })
     item.innerHTML=htmlStr
    })
})
// todo ======================= 省切换的时候，选择市 =======================
qsAll(`[name=province]`).forEach((item ,index)=>{
    item.addEventListener(`change`,function(){
    if (!this.value) return

        axios.get(`/geo/city`,{
            params:{
                pname:this.value
            }
        }).then(({data:res})=>{
            // console.log(res);
            let  htmlStr=`<option selected value="">--市--</option>`
             res.forEach(city=>{
                htmlStr+=`<option  value="${city}">${city}</option>`
                })
         qsAll(`[name=city]`)[index].innerHTML= htmlStr
        })
         // 在省切换的时候，除了要获取到市的数据之外，还需要将县的数据重置掉
         qsAll('[name=county]')[index].innerHTML = '<option selected value="">--县--</option>'
    })
})
// todo ======================= 市切换的时候，选择县 =======================
qsAll(`[name=city]`).forEach((item ,index)=>{
    // console.log(qsAll(`[name=province]`));
    // console.log(item);
    item.addEventListener(`change`,function(){
        axios.get(`/geo/county`,{
            params:{
                pname:qsAll(`[name=province]`)[index].value,
                cname:this.value
            }
        }).then(({data:res})=>{
            // console.log(res);
            let  htmlStr=`<option selected value="">--县--</option>`
             res.forEach(county=>{
                htmlStr+=`<option  value="${county}">${county}</option>`
                })
         qsAll(`[name=county]`)[index].innerHTML= htmlStr

        })
    })
})
// todo ======================= 添加完成 =======================
qs(`#addModal form`).addEventListener(`submit`,function(e){
    e.preventDefault()
   
    axios.post(`/student/add`,serializeForm(`#addModal`)
    //  {    name:obj.name,
    //     age:obj.age,
    //     sex:obj.sex,
    //     group:obj.group,
    //     phone:obj.phone,
    //     salary:obj.salary,
    //     truesalary:obj.truesalary,
    //     province:obj.province,
    //     county:obj.county,
    //     city:obj.city }
     ).then(({data:res})=>{
        alert(res.message);
         if(res.code===0){
         tbodyAxios()
         qs(`#closeAddBtn`).click()
         }
     }).catch(({response:{data}})=>{
        // console.dir(data);
        // alert(`添加失败`)
        alert(data.message)
     })
})
// todo ======================= 修改显示弹层 =======================
let id
// 修改学员 / 删除学员(事件委托)
qs(`tbody`).addEventListener(`click`,function(e){
    // console.log(e.target.classList.contains(`btn-xg`));
    // console.log(e.target.classList.contains(`btn-SC`));
    if(e.target.classList.contains(`btn-xg`)){
        id = e.target.dataset.id
        console.log(id);
        axios.get(`/student/one?id=${id}`).then(({data:{code,data,message}})=>{
            // console.log(res);
            if(code===0){
                qs(`#updateModal form [name=name]`).value = data.name
                qs('#updateModal form [name=age]').value = data.age
                qs('#updateModal form [name=phone]').value = data.phone
                qs('#updateModal form [name=salary]').value = data.salary
                qs('#updateModal form [name=truesalary]').value = data.truesalary
                  // 在处理下拉框
                qs('#updateModal form select[name=group]').value = data.group
                 // 由于省的数据本身就有，所有通过value来决定省的数据是哪个
                 qs('#updateModal form select[name=province]').value = data.province
                 // city  county 一开始是没有数据的，通过innerHTML来写入内容
                 qs('#updateModal form select[name=city]').innerHTML = `<option selected value="${data.city}">${data.city}</option>`
                 qs('#updateModal form select[name=county]').innerHTML = `<option selected value="${data.county}">${data.county}</option>`
 
                 // 最后处理单选框
                 //  按照data.sex的值来决定让哪个选中  checked = true
                 qs(`#updateModal form [name=sex][value=${data.sex}]`).checked = true

                 qs('#updateModal').classList.add('show')
                 qs('#backdrop').classList.add('show')

            }
        })
    }
    if(e.target.classList.contains(`btn-SC`)){
         id = e.target.dataset.id
        // console.log(id);
        axios.delete(`/student/delete`,{
            params:{
                id
            }
        }).then(({data:res})=>{
            tbodyAxios()
            console.log(res);
        })
    }
})
qs(`#butId`).addEventListener(`click`,function(){
    qs('#updateModal').classList.remove('show')
    qs('#backdrop').classList.remove('show')
})
// console.log(id);
// todo ======================= 修改学员 - 确认修改 =======================
qs('#updateModal form').addEventListener('submit', function (e) {
    e.preventDefault()

    // 收集表单数据
    // 调用serializeForm 函数来收集表单数据
    let obj = serializeForm('#updateModal')
    // 给对象obj添加id属性，记录修改学员的id信息

    // 方式1的做法 (最简单)
    obj.id = id
    console.log(obj.id);
    // 方式2:做法 -- 隐藏域来实现
    // 去获取到隐藏域，通过value属性就可以获取到学员id信息
    // console.log(qs('#updateModal form [name=id]'))
    // console.log(qs('#updateModal form [name=id]').value)

    // obj.id = qs('#updateModal form [name=id]').value
    console.log(obj)

    // 发送请求
    axios.put('/student/update', obj).then(({ data: { code, message } }) => {
        // 请求成功会执行的回调函数（状态码200）

        if (code === 0) {
            alert(message)
            // 添加成功，关闭弹出层 + 蒙层 + 渲染数据到页面
            qs('#butId').click()
            tbodyAxios()
        } else {
            // 添加失败
            alert(message)
        }
     }).catch(({ response: { data } }) => {
        // 请求失败 状态码400 会执行的回调函数  error 请求失败信息
        // console.log('请求失败了 ', error)
        // console.dir(error) // 以对象形式来看
        if (data.code === 1) {
            // 失败了
            alert(data.message)
        }
    })
})

// todo 封装获取表单数据
function serializeForm(element){
     // 获取表单上的值
     let obj={}
     qsAll(`${element} [type="text"]`).forEach(item=>{
         obj[item.name]=item.value
     })
     qsAll(`${element} select`).forEach(item=>{
         obj[item.name]=item.value
     })
     // 获取性别
     qsAll(`${element} [type="radio"]`).forEach(item=>{
         // console.log(item);
         if(item.checked){
         obj[item.name]=item.value
         }
     })
     return obj
}